// 报警日志
<template>
  <div class="problemList bg-f2">
    <div class="bg-f2 bg-fff">
      <div class="addMargin">
        <el-form :inline="true" class="formLine">
          <el-form-item label="报警时间：" class="formLine_item">
            <el-date-picker
              v-model="searchBox.alarmTime"
              :picker-options="pickerBeginDateBefore"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item class="formLine_item" label="报警等级：">
            <el-select v-model="searchBox.alarmLevel" clearable placeholder="请选择/搜索">
              <el-option v-for="item in optionsData" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="formLine_item">
            <el-input v-model.trim="searchBox.searchValue" clearable placeholder="输入设备名称" prefix-icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item class="formLine_item">
            <el-button @click="searchBtn()" type="primary" class="btnSizeStyle">查询</el-button>
            <!-- <el-button plain type="primary">打印</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <el-table
        border
        stripe
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        highlight-current-row
        ref="multipleTable"
        :data="tableList"
        style="width: 100%"
        :default-sort="{ prop: 'deviceName' }"
        v-loading="tableLoad"
      >
        <!-- 提示语句 -->
        <!-- <el-table-column prop="alarmDescribe" label="tooltip换行描述" width="140">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" placement="top">
              <div v-html="ToBreak(scope.row.alarmDescribe)" slot="content"></div>
              <div class="oneLine">{{ scope.row.alarmDescribe }}</div>
            </el-tooltip>
          </template>
        </el-table-column> -->
        <template slot="empty">{{ tableMessage }}</template>
        <el-table-column type="index" label="序号" min-width="50" align="center" />
        <el-table-column prop="assetName" label="设备名称" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column prop="alarmGrade" label="报警等级" min-width="100">
          <template slot-scope="scope">
            {{ optionsData[scope.row.alarmGrade - 1].label }}
          </template>
        </el-table-column>
        <el-table-column prop="alarmDescribe" label="报警描述" :show-overflow-tooltip="true" min-width="300">
          <template slot-scope="scope">
            {{ scope.row.alarmDescribe }}
            <!-- <el-tooltip class="item" effect="dark" placement="top">
              <div v-html="ToBreak(scope.row.alarmDescribe)" slot="content"></div>
              <div class="oneLine">{{ scope.row.alarmDescribe }}</div>
            </el-tooltip> -->
          </template>
        </el-table-column>
        <!-- 带有时分秒 -->
        <el-table-column label="报警时间" width="150">
          <template slot-scope="scope">{{ scope.row.alarmDate }}</template>
        </el-table-column>
        <el-table-column label="恢复时间" width="150">
          <template slot-scope="scope">{{ scope.row.recoveryDate | dateFormat }}</template>
        </el-table-column>
        <el-table-column label="创建时间" width="150">
          <template slot-scope="scope">{{ scope.row.createDate | dateFormat }}</template>
        </el-table-column>
        <el-table-column label="操作" align="right" min-width="80" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="Btn_nan" :disabled="scope.row.cancel !== 0" @click="cancelAlarm(scope.row)">取消报警</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row class="page-row">
        <el-col :span="12"> </el-col>
        <el-col :span="12" style="height: 47px; display: table">
          <el-pagination
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { alarm } from '@/utils/allUrl.js'
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      tableList: [],
      total: 0,
      // 机构
      optionsData: [
        { value: 1, label: '一级' },
        { value: 2, label: '二级' },
        { value: 3, label: '三级' },
        { value: 4, label: '四级' },
        { value: 5, label: '五级' },
        { value: 6, label: '六级' },
        { value: 7, label: '七级' },
        { value: 8, label: '八级' },
        { value: 9, label: '九级' },
      ], // 报警等级数组
      dialogVisibleDetele: false, // 删除
      searchBox: {
        alarmTime: '', // 报警时间
        alarmLevel: '', // 报警等级
        searchValue: '',
      },
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      tableLoad: false,
      tableMessage: '',
      tableTimer: null,
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.tableMessage = tableMessageText
          this.tableList = []
        }
      }, timeLoad)
    },
  },
  created() {
    this.initList()
  },
  methods: {
    ToBreak(val) {
      var html = ''
      var count = 50
      for (let i = 0; i <= val.length / count; i++) {
        html += val.slice(i * count, (i + 1) * count) + '<br />'
      }
      return html
    },
    // 获取列表
    async initList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const { alarmTime, alarmLevel, searchValue } = this.searchBox
      const params = new URLSearchParams()
      if (alarmTime) {
        // 报警时间
        console.log(alarmTime)
        params.append('ALARM_DATE_START', `${alarmTime[0]} 00:00:00` || '')
        params.append('ALARM_DATE_END', `${alarmTime[1]} 23:59:59` || '')
      }
      params.append('ALARM_GRADE', alarmLevel) // 报警等级
      params.append('ASSET_NAME', searchValue) // 资产名称
      params.append('M_', this.currentPage) // 当前页
      params.append('N_', this.pageSize) // 每页条数
      const { data: res } = await this.$http.post(`${alarm}journal/selectAlarmJournalList`, params)
      this.tableLoad = false
      switch (res.code) {
        case '0000':
          this.tableList = res.data.list
          this.total = res.data.total
          break
        default:
          this.tableList = []
          this.tableMessage = res.message
          this.total = 0
          break
      }
    },
    async cancelAlarm(item) {
      const params = new URLSearchParams()
      params.append('alarmGrade', item.alarmGrade)
      params.append('assetId', item.assetId)
      const { data: res } = await this.$http.post(`${alarm}journal/noAlarmPush`, params)
      console.log(res)
      switch (res.code) {
        case '0000':
          this.initList()
          this.$message.success(res.message)
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    searchBtn() {
      this.currentPage = 1
      this.initList()
    },
    handleSizeChange(e) {
      this.currentPage = 1
      this.pageSize = e
      this.initList()
    },
    handleCurrentChange(e) {
      this.currentPage = e
      this.initList()
    },
  },
}
</script>
<style lang="scss" scoped>
.oneLine {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.addMargin {
  .increased {
    background: rgba(103, 194, 58, 1);
    font-size: 14px;
    color: #fff;
    text-align: center;
  }
  .formLine {
    margin: 0;
    float: left;
    .formLine_item {
      padding: 0;
      margin-bottom: 15px;
    }
  }
}
.addMargin:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
</style>
